<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :border="false">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 3 }" :wrapper-col="{ span: 8 }">
        <a-form-model-item label="门店名称" prop="name">
          <a-input v-model="form.name" placeholder="请输入门店名称" />
        </a-form-model-item>

        <a-form-model-item label="店铺类型" prop="type">
          <a-select v-model="form.type" style="width: 200px">
            <a-select-option v-for="(value, key) in pageData.type" :key="key">
              {{ value }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="订单分类" prop="category">
          <a-select v-model="form.category" style="width: 200px">
            <a-select-option v-for="(value, key) in pageData.category" :key="key">
              {{ value }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="门店经纬度" prop="longitude">
          <a-input :value="`${form.longitude}，${form.latitude}`" @focus="showMap" placeholder="请输入app_id" />
        </a-form-model-item>

        <a-form-model-item label="配送时间" prop="cyy_delivery_time">
          <a-input v-model="form.cyy_delivery_time" addon-after="分钟" placeholder="请输入配送时间（分钟）" />
        </a-form-model-item>
        <a-form-model-item label="配送费用" prop="cyy_delivery_fee">
          <a-input v-model="form.cyy_delivery_fee" addon-after="元" placeholder="请输入配送费用（元）" />
        </a-form-model-item>
        <a-form-model-item label="是否开启" prop="is_open">
          <a-switch v-model="form.is_open" @change="(e) => (form.is_open = Number(e))"></a-switch>
        </a-form-model-item>
        
        <a-form-model-item v-if="auth_url" label="店铺授权链接">
          <a :href="auth_url" target="_blank" >立即前往</a>
        </a-form-model-item>
        <a-form-model-item label="授权状态">
          <span>{{pageData.isopen ? '可用': '不可用'}}</span>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 3 }">
          <a-button type="primary" @click="submitForm" :loading="modalLoading"> 提交 </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>

    <SelectMap v-if="mapVisiable" :value.sync="mapVisiable" @onOk="selectMapOk"></SelectMap>
  </page-header-wrapper>
</template>

<script>
import mytApi from '@/api/maiyatian'
import SelectMap from '@/components/SelectMap/SelectMap'

export default {
  components: {
    SelectMap,
  },

  data() {
    return {
      pageData: {},
      mapVisiable: false,
      form: {},
      rules: {
        name: [{ required: true, message: '请输入门店名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择店铺类型', trigger: 'blur' }],
        category: [{ required: true, message: '请选择订单分类', trigger: 'blur' }],
        longitude: [{ required: true, message: '请选择经纬度', trigger: 'change' }],
        cyy_delivery_time: [{ required: true, message: '请输入配送时间', trigger: 'blur' }],
        is_open: [{ required: true, message: '请选择店铺状态', trigger: 'blur' }],
      },
      modalLoading: false,
      auth_url: '',
    }
  },

  methods: {
    showMap() {
      this.mapVisiable = !this.mapVisiable
    },
    selectMapOk(location) {
      if (location) {
        let [longitude, latitude] = location.split(',')
        this.form.longitude = longitude
        this.form.latitude = latitude
      }
    },
    
    // 表单提交
    submitForm() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.modalLoading = true
          let { form } = this
          const res = await mytApi.maiyatianIndexSave({
            conf: form,
          })
          this.modalLoading = false
          this.$message.success('保存成功')
          this.getData()
          this.getAuthUrl()
        }
      })
    },

    async getData() {
      const res = await mytApi.maiyatianIndexConf()
      this.pageData = res.data
      this.form = res.data.conf
    },
    async getAuthUrl() {
      const res = await mytApi.maiyatianIndexUrl()
      if(res.data) this.auth_url = res.data
    }
  },

  created() {
    this.getData()
    this.getAuthUrl()
  },
}
</script>

<style lang="less" scoped>
.title {
  color: #000;
  font-size: 16px;
  margin-bottom: 10px;
}
.tip {
  font-size: 14px;
  color: #8c8c8c;
  display: block;
}
</style>
